<!--
 * Copyright (c) 2013-Now http://jeesite.com All rights reserved.
 * No deletion without permission, or be held responsible to law.
 * @author YDZ
-->
<template>
  <div>
    <BasicTable @register="registerTable">
      <template #tableTitle>
        <Icon :icon="getTitle.icon" class="m-1 pr-1" />
        <span> {{ getTitle.value }} </span>
      </template>
      <!-- <template #toolbar>
        <a-button type="default" @click="handleExport()">
          <Icon icon="i-ant-design:download-outlined" /> {{ t('导出') }}
        </a-button>
        <a-button type="primary" @click="handleForm({})" v-auth="'cardd:order:carddYcdd:edit'">
          <Icon icon="i-fluent:add-12-filled" /> {{ t('新增') }}
        </a-button>
        <a-button type="primary" @click="handleOrderCancel()" v-auth="'cardd:order:carddYcdd:edit'">
          <Icon icon="" /> {{ t('订单取消') }}
        </a-button>
        <a-button
          type="primary"
          @click="handleOrderRecover()"
          v-auth="'cardd:order:carddYcdd:edit'"
        >
          <Icon icon="" /> {{ t('订单恢复') }}
        </a-button>
      </template> -->
      <template #firstColumn="{ record }">
        <a @click="handleForm({ id: record.id })">
          {{ record.ycddDdbh }}
        </a>
      </template>

      <template #time="{ record, column }">
        <!-- <a-tooltip placement="topLeft" title="订单111232，订单6666">
          <div :style="{background:'#125684'}" style="width: 100%;height: 100%;height: 30px;cursor: pointer;">
          </div>
        </a-tooltip> -->
        <div v-if="record[column.dataIndex]" :style="{background:'#5ce677'}" style="width: 100%;height: 30px;cursor: pointer;">
          <Dropdown placement="bottom" >
           <div  style="width: 100%;height: 100%;"></div>
            <template #overlay>
              <Menu >
                <MenuItem  v-for="(item,index) in record[column.dataIndex]" :key="index" @click="handlexq(item)">
                  <!-- <span>{{item.orderCode}}</span> -->
                  <span>{{item.cusName}} {{item.deptName}}</span>
                </MenuItem>
                  <!-- <MenuItem >
                    <span>材料清单22</span>
                    </MenuItem> -->
              </Menu>
            </template>
          </Dropdown>
        </div>
      </template>
      
    </BasicTable>
    <InputForm @register="registerDrawer" @success="handleSuccess" />
  </div>
</template>
<script lang="ts">
  export default defineComponent({
    name: 'ViewsCarddOrderCarddYcddList',
    components: { Menu, Dropdown, MenuItem: Menu.Item },
  });
</script>
<script lang="ts" setup>
  import { defineComponent,unref,onMounted,ref } from 'vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { router } from '/@/router';
  import { Icon } from '/@/components/Icon';
  import { BasicTable, BasicColumn, useTable } from '/@/components/Table';
  import {
    carddYcddDelete,
    carddYcddListData,
    carddYcddCancel,
    carddYcddRecover,
    personListByDay
  } from '/@/api/cardd/order/carddYcdd';
  import { useDrawer } from '/@/components/Drawer';
  import { useModal } from '/@/components/Modal';
  import { FormProps } from '/@/components/Form';
  import { Menu, Dropdown } from 'ant-design-vue';

  import InputForm from './form.vue';

  const { t } = useI18n('cardd.order.carddYcdd');
  const { showMessage } = useMessage();
  const { meta } = unref(router.currentRoute);

  const getTitle = {
    icon: meta.icon || 'i-ant-design:book-outlined',
    value: meta.title || t('驾驶员日报管理'),
  };

  const searchForm: FormProps = {
    baseColProps: { lg: 8, md: 8 },
    labelWidth: 90,
    schemas: [
      // {
      //   label: t('车辆类型'),
      //   field: 'btPpxh',
      //   // component: 'Input',
      //   component: 'Select',
      //   componentProps: {
      //     dictType: 'car_type',
      //     allowClear: true,
      //     // onChange: handleSuccess,
      //   },
      // },
      {
        label: t('驾驶员'),
        field: 'btJsy',
        component: 'Input',
      },
     
    ],
  };

  const tableColumns: BasicColumn[] = [
    {
      title: t('驾驶员'),
      dataIndex: 'personName',
      // key: 'a.ycdd_ppxh',
      // dictType: 'car_type',
      // sorter: true,
      width: 80,
      align: 'center',
      fixed: 'left',
    },
    // {
    //   title: t('车牌号'),
    //   dataIndex: 'carNo',
    //   // key: 'a.ycdd_cph',
    //   // sorter: true,
    //   width: 80,
    //   align: 'center',
    // },
    {
      title: t('0点'),
      dataIndex: '0',
      width: 50,
      align: 'center',
      slot: 'time',
    },
    {
      title: t('1点'),
      dataIndex: '1',
      width: 50,
      align: 'center',
      slot: 'time',
    },
    {
      title: t('2点'),
      dataIndex: '2',
      width: 50,
      align: 'center',
      slot: 'time',
    },
    {
      title: t('3点'),
      dataIndex: '3',
      width: 50,
      align: 'center',
      slot: 'time',
    },
    {
      title: t('4点'),
      dataIndex: '4',
      width: 50,
      align: 'center',
      slot: 'time',
    },
    {
      title: t('5点'),
      dataIndex: '5',
      width: 50,
      align: 'center',
      slot: 'time',
    },
    {
      title: t('6点'),
      dataIndex: '6',
      width: 50,
      align: 'center',
      slot: 'time',
    },
    {
      title: t('7点'),
      dataIndex: '7',
      width: 50,
      align: 'center',
      slot: 'time',
    },
    {
      title: t('8点'),
      dataIndex: '8',
      width: 50,
      align: 'center',
      slot: 'time',
    },
    {
      title: t('9点'),
      dataIndex: '9',
      width: 50,
      align: 'center',
      slot: 'time',
    },
    {
      title: t('10点'),
      dataIndex: '10',
      width: 50,
      align: 'center',
      slot: 'time',
    },
    {
      title: t('11点'),
      dataIndex: '11',
      width: 50,
      align: 'center',
      slot: 'time',
    },
    {
      title: t('12点'),
      dataIndex: '12',
      width: 50,
      align: 'center',
      slot: 'time',
    },
    {
      title: t('13点'),
      dataIndex: '13',
      width: 50,
      align: 'center',
      slot: 'time',
    },
    {
      title: t('14点'),
      dataIndex: '14',
      width: 50,
      align: 'center',
      slot: 'time',
    },
    {
      title: t('15点'),
      dataIndex: '15',
      width: 50,
      align: 'center',
      slot: 'time',
    },
    {
      title: t('16点'),
      dataIndex: '16',
      width: 50,
      align: 'center',
      slot: 'time',
    },
    {
      title: t('17点'),
      dataIndex: '17',
      width: 50,
      align: 'center',
      slot: 'time',
    },
    {
      title: t('18点'),
      dataIndex: '18',
      width: 50,
      align: 'center',
      slot: 'time',
    },
    {
      title: t('19点'),
      dataIndex: '19',
      width: 50,
      align: 'center',
      slot: 'time',
    },
    {
      title: t('20点'),
      dataIndex: '20',
      width: 50,
      align: 'center',
      slot: 'time',
    },
    {
      title: t('21点'),
      dataIndex: '21',
      width: 50,
      align: 'center',
      slot: 'time',
    },
    {
      title: t('22点'),
      dataIndex: '22',
      width: 50,
      align: 'center',
      slot: 'time',
    },
    {
      title: t('23点'),
      dataIndex: '23',
      width: 50,
      align: 'center',
      slot: 'time',
    },
    {
      title: t('租赁方式'),
      dataIndex: 'btZlfs',
      width: 130,
      align: 'left',
      dictType: 'car_zlfs',
      ifShow:false,
    },
    {
      title: t('品牌型号'),
      dataIndex: 'btPpxh',
      width: 130,
      align: 'left',
      dictType: 'car_type',
      ifShow:false,
    },
    {
      title: t('外调类型'),
      dataIndex: 'btWdlx',
      width: 130,
      align: 'left',
      dictType: 'car_wdlx',
      ifShow:false,
    },
    {
      title: t('是否包干'),
      dataIndex: 'btSfbgj',
      width: 130,
      align: 'left',
      dictType: 'sys_yes_no',
      ifShow:false,
    },
  ];

  

  let lists = ref<any>([]);
  const [registerDrawer, { openDrawer }] = useDrawer();
  const [registerTable, { reload, getForm, getSelectRowKeys }] = useTable({
    api: personListByDay,
    beforeFetch: (params) => {

      var myDate = new Date();
      let btKsrq = ''
      let y = myDate.getFullYear();
      let m = myDate.getMonth()+1<10? `0${myDate.getMonth()+1}`: myDate.getMonth()+1;
      let d = myDate.getDate()<10? `0${myDate.getDate()}`: myDate.getDate();
      btKsrq=`${y}-${m}-${d}`
      params.btKsrq = btKsrq
      return params;
    },
    afterFetch:async (list) => {
      lists.value = await list.map(item=>{
        return {
          ...item,
          ...item.hourMap
        }
      })
      return lists.value;
    },
    columns: tableColumns,
    // actionColumn: actionColumn,
    formConfig: searchForm,
    showTableSetting: false,
    useSearchForm: true,
    canResize: true,
    pagination:false,
    showIndexColumn:false,
    // rowSelection: {
    //   type: 'checkbox',
    // },
  });

  
  function handlexq(item) {
    openDrawer(true, {
      id:item.orderId
    });
  }

  function handleForm(record: Recordable) {
    openDrawer(true, record);
  }

//   onMounted(async () => {
   
//    var myDate = new Date();
//    let btKsrq = ''
//    let y = myDate.getFullYear();
//    let m = myDate.getMonth()+1<10? `0${myDate.getMonth()+1}`: myDate.getMonth()+1;
//    let d = myDate.getDate()<10? `0${myDate.getDate()}`: myDate.getDate();
//    btKsrq=`${y}-${m}-${d}`

//    listData(objNewDate.value);
//  });

  const [registerImportModal, { openModal: importModal }] = useModal();


  // 订单取消
  async function handleOrderRecover() {
    if (getSelectRowKeys().length) {
      const res = await carddYcddRecover({ selIds: getSelectRowKeys().join(',') });
      showMessage(res.message);
      handleSuccess({});
    } else {
      showMessage('请先选中要恢复的用车订单！', 'error');
    }
  }

  //订单恢复
  async function handleOrderCancel() {
    if (getSelectRowKeys().length) {
      const res = await carddYcddCancel({ selIds: getSelectRowKeys().join(',') });
      showMessage(res.message);
      handleSuccess({});
    } else {
      showMessage('请先选中要取消的用车订单！', 'error');
    }
  }

  function handleSuccess(record: Recordable) {
    reload({ record });
  }
</script>

<style scoped >
 /deep/.ant-table-cell-ellipsis{
  padding-left: 0 !important;
  padding-right: 0 !important;
  /* margin: 0 !important; */
  /* color: #5ce677; */
 }
</style>